<template>
  <view class="container">
    <uv-navbar
      title="连接WIFI"
      bg-color="none"
      @leftClick="leftClick"
    ></uv-navbar>
    <uv-form
      labelPosition="left"
      :model="form"
      :rules="rules"
      ref="form"
      labelWidth="0"
    >
      <view class="wx-box">
        <view class="name">WiFi名称</view>
        <uv-form-item prop="name">
          <view class="content">
            <uv-input
              v-model="form.name"
              placeholder="WiFi名称"
              border="none"
            ></uv-input>
          </view>
        </uv-form-item>
        <view class="password">WiFi密码</view>
        <uv-form-item prop="password">
          <view class="content">
            <uv-input
              v-model="form.password"
              placeholder="WiFi密码"
              :password="showPassword"
              border="none"
            ></uv-input>
            <text
              class="dy-iconfont"
              :class="[showPassword ? 'icon-mimabukejian' : 'icon-mimakejian']"
              @click="changePassword"
              >&#xe568;</text
            >
          </view>
        </uv-form-item>
      </view>
      <view class="button-fb" @click="onSubmit">保存提交</view>
      <!-- <view class="button-fb" @click="test">连接测试</view>
			<view class="button-fb" @click="test2">连接测试2</view> -->
    </uv-form>

    <uv-loading-page
      :loading="loading"
      loading-mode="semicircle"
      bgColor="rgba(0, 0, 0, 0.2)"
    ></uv-loading-page>
  </view>
</template>

<script>
const app = getApp();
import { updateInfo } from "@/common/api.js";
export default {
  data() {
    return {
      loading: false,
      showPassword: true,
      form: {
        name: "",
        password: "",
      },
      rules: {
        name: [
          {
            type: "string",
            required: true,
            message: "请填写WiFi名称",
            trigger: ["blur", "change"],
          },
          {
            type: "string",
            required: true,
            max: 50,
            message: "Wi-Fi名称不能超过50个字",
            trigger: ["blur", "change"],
          },
        ],
        password: [
          {
            type: "string",
            required: true,
            message: "请填写WiFi密码",
            trigger: ["blur", "change"],
          },
          {
            type: "string",
            required: true,
            max: 50,
            message: "Wi-Fi密码不能超过50个字",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  methods: {
    leftClick() {
      app.navigateBack();
    },

    onSubmit() {
      this.$refs.form.validate().then((res) => {
        uni.showLoading({
          title: "保存中...",
        });
        updateInfo({
          storeWifiName: this.form.name,
          storeWifiPassword: this.form.password,
        })
          .then((res) => {
            uni.hideLoading();
            this.form = {
              name: "",
              password: "",
            };
            this.$toast("保存成功");
          })
          .catch(() => {
            uni.hideLoading();
          });
      });
    },
    changePassword() {
      this.showPassword = !this.showPassword;
    },
    test() {
      app.navigationTo(
        `page_account/WIFI/C-WIFI?name=${this.form.name}&password=${this.form.password}`
      );
    },
    test2() {
      app.navigationTo(
        `page_account/WIFI/C-WIFI?name=${this.form.name}&password=${this.form.password}&type=2`
      );
    },
    onConnect() {},
  },
};
</script>

<style lang="scss" scoped>
.container {
  overflow: hidden;
  min-height: 100vh;
  width: 100vw;
  padding: 40rpx;
  padding-top: 226rpx;
  // padding-bottom: calc(96rpx + 32rpx + 22rpx);
  box-sizing: border-box;
  background: radial-gradient(
    128% 128% at 95% 0%,
    #d7ceff 0%,
    #bbe1ff 62%,
    #ffffff 95%
  );

  .button-fb {
    width: 480rpx;
    height: 96rpx;
    background: linear-gradient(180deg, #886ae6 0%, #4635ff 99%);
    border-radius: 48rpx;
    font-weight: 400;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 96rpx;
    text-align: center;
    margin: 0 auto;
    margin-top: 60rpx;
  }

  .wx-box {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 32rpx;
    border: 2rpx solid #ffffff;
    box-sizing: border-box;
    padding: 44rpx 40rpx;
    box-sizing: border-box;
    font-weight: 400;
    font-size: 32rpx;
    color: #000000;
    line-height: 48rpx;

    .name {
      &::before {
        font-family: "dy-iconfont";
        content: "\e7e0";
        font-size: 40rpx;
        padding-right: 22rpx;
        box-sizing: border-box;
      }
    }

    .password {
      margin-top: 44rpx;

      &::before {
        font-family: "dy-iconfont";
        content: "\e636";
        font-size: 40rpx;
        font-weight: 500;
        padding-right: 22rpx;
        box-sizing: border-box;
      }
    }

    .content {
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;
      width: 100%;
      height: 80rpx;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 16rpx;
      padding: 18rpx 20rpx;
      box-sizing: border-box;
      font-weight: 400;
      font-size: 30rpx;
      color: #000000;

      .dy-iconfont {
        font-size: 46rpx;
      }

      input {
        flex: 1;
      }
    }
  }

  .wifi-pop {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 614rpx;
    background: #ffffff;
    padding: 168rpx 0 80rpx 0;
    box-sizing: border-box;

    .connect {
      width: 392rpx;
      height: 80rpx;
      background: linear-gradient(180deg, #886ae6 0%, #4635ff 99%);
      border-radius: 80rpx;
      font-weight: 400;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 80rpx;
      text-align: center;
    }
  }
}
</style>
